<template>
	<uv-tabbar inactiveColor="#666666" :activeColor="theme == 'fs'? '#006BFE': '#0BCA89'" :value="value"
		@change="onChange">
		<uv-tabbar-item text="首页" name="home">
			<template v-slot:active-icon>
				<image class="icon" src="@/static/tabbar/home-active.png" v-if="theme=='fs'"></image>
				<image class="icon" src="@/static/tabbar/farmer-home-active.png" v-else></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="@/static/tabbar/home.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="消息" name="message" :badge="unreadCount">
			<template v-slot:active-icon>
				<image class="icon" src="@/static/tabbar/message-active.png" v-if="theme=='fs'"></image>
				<image class="icon" src="@/static/tabbar/farmer-message-active.png" v-else></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="@/static/tabbar/message.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="订单" name="order" v-if="theme=='fs'">
			<template v-slot:active-icon>
				<image class="icon" src="@/static/tabbar/order-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="@/static/tabbar/order.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="订单" name="order" v-else>
			<template v-slot:active-icon>
				<view class="m-icon-box">
					<image class="icon" src="@/static/tabbar/farmer-order.png"></image>
					<view class="ab-box">
						<image class="ab-icon" src="@/static/tabbar/farmer-order.png" mode="aspectFit"></image>
					</view>
				</view>
			</template>
			<template v-slot:inactive-icon>
				<view class="m-icon-box">
					<image class="icon" src="@/static/tabbar/farmer-order.png"></image>
					<view class="ab-box">
						<image class="ab-icon" src="@/static/tabbar/farmer-order.png" mode="aspectFit"></image>
					</view>
				</view>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="百科" name="baike" v-if="theme!='fs'">
			<template v-slot:active-icon>
				<image class="icon" src="@/static/tabbar/farmer-baike-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="@/static/tabbar/farmer-baike.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="我的" name="mine">
			<template v-slot:active-icon>
				<image class="icon" src="@/static/tabbar/mine-active.png" v-if="theme=='fs'"></image>
				<image class="icon" src="@/static/tabbar/farmer-mine-active.png" v-else></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="@/static/tabbar/mine.png"></image>
			</template>
		</uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	import { mapGetters } from 'vuex'
	export default {
		props: {
			current: {
				type: String,
				default: 'home'
			}
		},
		data() {
			return {
				loginType: uni.getStorageSync('login-type'),
				value: 'home',
				routerPath: {
					home: '/pages/index/index',
					message: '/pages/message/index',
					order: '/pages/order/index',
					farmerOrder: '/pages/order/index',
					baike: '/pages/baike/index',
					mine: '/pages/mine/index',
				},
				// unreadCount: this.$store.state.message.unreadCount
			}
		},
		computed: {
			...mapGetters(['theme', 'userInfo']),
			unreadCount(){
				return this.$store.state.message.unreadCount
			}
		},
		watch: {
			current:{
				handler(v) {
				this.value = v
			},
			immediate: true
			}
		},
		created() {
			uni.hideTabBar();
		},
		methods: {
			onChange(i) {
				if(i=='baike'||i=='home') {
					uni.switchTab({
						url: this.routerPath[i]
					})
				} else {
					// this.value = i
					// uni.$uv.route(this.routerPath[i]);
					// const user = uni.getStorageSync('userInfo')
					if(!this.userInfo) {
						uni.$uv.route( "/pages/public/login")
						return
					} 
					uni.switchTab({
						url: this.routerPath[i]
					})
				}
				
			}
		}
	}
</script>
<style scoped lang="scss">
	.icon {
		width: 46rpx;
		height: 46rpx;
	}

	.m-icon-box {
		position: relative;

		.ab-box {
			width: 50px;
			height: 50px;
			line-height: 50px;
			border-radius: 50%;
			background-color: #0BCA89;
			position: absolute;
			top: -28px;
			left: -16px;
			text-align: center;

			.ab-icon {
				width: 24px;
				height: 50px;
			}
		}
	}

	// .m-icon-box::after {
	// 	content: '';
	// 	width: 50px;
	// 	height: 50px;
	// 	border-radius: 50%;
	// 	background-color: #0BCA89;
	// 	position: absolute;
	// 	top: -28px;
	// 	left: -16px;
	// }
</style>